<template>
  <div class="mo-fang-tabs">
    <el-tabs v-model="activeTab" @tab-click="handleSelect">
      <el-tab-pane :label="item.label" :name="item.value" v-for="item in [{label: '全部', value: ''}].concat(dictMaps.product_type)" :key="item.value"></el-tab-pane>
    </el-tabs>
    <ProductCard :itemList="pagedTable"></ProductCard>
    <iep-pagination
      @size-change="handlePaginationSizeChange"
      @current-change="handlePaginationCurrentChange"
      :pagination-option="pagination"
      :page-sizes="initPageSize"
      layout="total, prev, pager, next"
      prev-text="上一页"
      next-text="下一页"
      background
    ></iep-pagination>
  </div>
</template>
<script>
import { tabList } from './options'
import Tabs from './Components/AllTabs'
import ProductCard from './Components/ProductCard'
import { getAllShopPage } from '@/api/product'
import { mapGetters } from 'vuex'
import Mixin from '@/mixins/mixins'
import IepPagination from '@/components/IepTable/Pagination'
export default {
  components: { Tabs, ProductCard, IepPagination },
  mixins: [Mixin],
  data () {
    return {
      tabList,
      activeTab: ''
    }
  },
  computed: {
    ...mapGetters(['dictMaps']),
    initPageSize () {
      const pageOptionSize = 10
      return [
        pageOptionSize,
        pageOptionSize * 2,
        pageOptionSize * 3,
        pageOptionSize * 4
      ]
    }
  },
  created () {
    this.loadPage()
  },
  methods: {
    handleSelect (row) {
      this.loadPage({ type: row.name })
    },
    loadPage (params = {type: ''}) {
      this.loadTable(params, getAllShopPage)
    }
  }
}
</script>
<style lang="scss" scoped>
.mo-fang-tabs {
  margin: 30px auto 40px;
  width: 1200px;
}
</style>
